<template>
<div class="pad20">
    <el-row>
        <el-col :span="6" v-for="(item, index) in cardList" :key="index">
            <div class="mcard1">
                <div class="t" :style="{backgroundColor: item.color}">{{item.name}}</div>
                <div class="c" :style="{color: item.color}">{{item.num}}</div>
            </div>
        </el-col>
    </el-row>
    <el-row class="top20">
        <el-col :span="18">
            <div class="pad10">
                <div class="borderRad pad10">
                    <Chart1 />
                </div>
            </div>
            <el-row class="pad10 top10">
                <el-col :span="12">
                    <div class="borderRad pad10 right10">
                        <Chart2 />
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="borderRad pad10 left10">
                        <Chart3 />
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="6">
            <div class="pad10">
                <div class="phb borderRad">
                    <div class="t">
                        <span class="col333">本月热门服务</span>
                        <span class="colred left10">TOP 10</span>
                    </div>
                    <div class="pad10">
                        <table class="m-table1">
                            <tr class="tr">
                                <td>服务项目</td>
                                <td>订单量</td>
                            </tr>
                            <tr v-for="(item, index) in phbList" :key="index">
                                <td style="text-align: left">
                                    <span class="yuan2" style="background-color: #FF5D52" v-if="index==0">{{index+1}}</span>
                                    <span class="yuan2" style="background-color: #FF9352" v-if="index==1">{{index+1}}</span>
                                    <span class="yuan2" style="background-color: #FFCE38" v-if="index==2">{{index+1}}</span>
                                    <span class="yuan2" v-if="index !=0&&index !=1&&index !=2">{{index+1}}</span>
                                    <span class="left20">{{item.name}}</span>
                                </td>
                                <td style="border-left: 1px solid #EBEEF7">{{item.value}} <img class="right" :src="item.a" /></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
import Chart1 from './chart/Chart1'
import Chart2 from './chart/Chart2'
import Chart3 from './chart/Chart3'
export default {
    components: {
        Chart1,
        Chart2,
        Chart3,
    },
    data() {
        return {
            phbList: [
                {name: '集中就餐', value: '14567676', a: require('../../../assets/ico6.png')},
                {name: '上门送餐', value: '654554',a: require('../../../assets/ico6.png')},
                {name: '室内除尘、清洁', value: '56553', a: ''},
                {name: '玻璃清洁', value: '4545',a: require('../../../assets/ico7.png')},
                {name: '衣物清洗', value: '4344', a: require('../../../assets/ico8.png')},
                {name: '玻璃清洗', value: '3522', a: ''},
                {name: '协助更衣及指导', value: '3111', a: ''},
                {name: '温水擦浴', value: '2356', a: ''},
                {name: '失禁护理', value: '2222', a: ''},
                {name: '日间照料', value: '1111', a: ''},
            ],
            cardList: [{
                    name: '服务订单总量',
                    num: '49852',
                    color: '#6395FF'
                },
                {
                    name: '已完成的服务订单量',
                    num: '49136',
                    color: '#FFAE38'
                },
                {
                    name: '已评估老人人数',
                    num: '9820',
                    color: '#FF5D52'
                },
                {
                    name: '养老补贴总金额（万元）',
                    num: '196.5',
                    color: '#C38DFF'
                },
            ]
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {}
};
</script>

<style scoped>

</style>
